<template>
	<view class="deviceMovementList">
		<!-- 设备移库列表 -->
		<navBar title="设备移库清单" goBackUrl="/subpackage-equipment/pages/device/deviceStock/deviceMovement" @goBack="goBack"></navBar>
		
		<text class="del" @click="getDelDevice">删除</text>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="info collapseUpload uniCollapse">
				<uni-collapse>
					<checkbox-group @change="checkboxChange">
						<uni-collapse-item v-for="(item,index) in deviceList" title-border="show" :key="item.id" :name="index" :title="item.allName" :value="item.totalNum +''">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.allName }}
									</view>
									<view class="right">
										{{ item.totalNum }}
									</view>
								</view>
							</template>
							<label v-for="(value,key) in item.infoList" :key="key">
								<view class="center">
									<view class="item">
										<view class="name">资产归属：</view>
										<view class="value">{{ value.assetOwnership }}</view>
									</view>
									<view class="item">
										<view class="name">设备编号：</view>
										<view class="value">{{ value.code }}</view>
									</view>
									<view class="item">
										<view class="name">规格型号：</view>
										<view class="value">{{ value.specificationModel }}</view>
									</view>
									<!-- <view class="item">
										<view class="name">存储区域：</view>
										<view class="value">{{ value.storageAreaName }}</view>
									</view> -->
									<view class="item">
										<view class="name">基地名称：</view>
										<view class="value">{{ value.stationName }}</view>
									</view>
									<checkbox :value="value.tempId" :checked="value.isChecked" class="checkbox color round" />
								</view>
							</label>
						</uni-collapse-item>
					</checkbox-group>
				</uni-collapse>
			</view>
		</scroll-view>
		
		
		<view class="buttonAll">
			<view class="all">
				<view class="none"></view>
				<view class="num">小计: {{ total }}</view>
			</view>
			<u-button type="primary"  :loading="loading" text="保存" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import { mapMutations, mapState } from "vuex"
	import mixins from "@/utils/mixins.js"
	import uniCollapse from "./../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		mixins: [mixins],
		components: {
			uniCollapse
		},
		data() {
			return {
				loading: false,
				deviceList: [],
				total: 0,
				list: []
			}
		},
		mounted() {
			if(this.stockSelectList && this.stockSelectList.length >0 ){
				this.list = this.stockSelectList.map(item=>({...item, isChecked: false, totalNum: 1}))
				this.deviceList = this.ArrayFilter(this.list)
				this.deviceList.forEach(item=>{
					this.total = this.total + +item.totalNum
				})
			}
		},
		computed: {
			...mapState('device',['stockSelectList'])
		},
		methods: {
			...mapMutations('device', ["getStockSelectList", "getStockTempIds"]),
			checkboxChange(e){
				this.checkList = e.detail.value
				
				console.log(e.detail.value)
			},
			
			// 删除
			getDelDevice(){
				if(this.checkList && this.checkList.length > 0){
					// 过滤选中的(把选中的去掉)(满足条件的过滤掉)
					let arr = this.list.filter(item=>{
						return !this.checkList.find(value=>item.tempId === value)
					})
					arr = arr.map(item=>({...item, isChecked: false, totalNum: 1}))
					this.deviceList = this.ArrayFilter(arr)
					this.total = 0
					this.deviceList.forEach(item=>{
						this.total = this.total + +item.totalNum
					})
					
					// 提取arr数组 tempId
					let ids = arr.map(item=>item.tempId)
					
					// 存储到 vuex 中
					this.getStockSelectList(arr)
					this.getStockTempIds(ids)
				}
			},
			
			// 提交
			submit(){
				if(this.loading) return
				this.loading = true
				uni.redirectTo({
					url: "/subpackage-equipment/pages/device/deviceStock/deviceMovement"
				})
				this.loading = false
			},
			
			// 返回上一级
			goBack(url){
				uni.redirectTo({
					url: url
				})
			},
			
			// 格式化 数组结构
			ArrayFilter(list){
				let arr = this.DelSameObjValue(list, 'allName', 'totalNum').map(item=>({id: item.id, allName: item.allName, totalNum: item.totalNum, infoList: []}))
				arr.forEach(item=>{
					list.forEach(value=>{
						if(item.allName === value.allName){
							item.infoList.push(value)
						}
					})
				})
				return arr
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deviceMovementList{
		/* #ifdef MP-WEIXIN */
			padding-top: 176rpx;
		/* #endif */
		padding-bottom: 160rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		background-color: #F5F7FA;
		height: calc(100vh - 190rpx);
		position: relative;
		
		.del{
			position: absolute;
			top: 42rpx;
			right: 50rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FF6A6A;
		}
		.scroll-box{
			max-height: calc(100vh - 335rpx);
			padding-top: 10rpx;
		}
		.content{
			background-color: #F5F7FA;
			padding: 24rpx 32rpx;
		}
		.info{
			padding: 24rpx 32rpx;
			.center{
				position: relative;
				background-color: #FFFFFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.item{
					display: flex;
					margin-top: 20rpx;
					
					.name{
						width: 150rpx;
					}
				}
				.checkbox{
					position: absolute;
					top: 26rpx;
					right: 26rpx;
				}
			}
		}
		.buttonAll{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			.all{
				padding: 0rpx 50rpx;
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				color: #445469;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>
